<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- 修改油画页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品更新</title>
<link rel="stylesheet" type="text/css" href="../../css/create.css">
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../js/validation.js"></script>
<script type="text/javascript">
	$(function () {
		$("#first_cid").val(${goodsDTO.first_cid});
		/*根据一级分类的改变，使用ajax获取二级分类，同时添加到二级分类选项列表*/
		$("#first_cid").on("change", function () {
			var firstId = $(this).val();
			$.ajax({
				url: "management?method=gsecond",
				type: "get",
				data: {"id": firstId},
				dataType: "json",
				success: function (json) {
					console.log(json);
					//移除所有second_cid下的原始option选项
					$("#second_cid>option").remove();
					$("#second_cid").append("<option value='-1'>请选择二级分类</option>");
					for (var i = 0; i < json.length; i++) {
						var ch = json[i];
						$("#second_cid").append("<option value='" + ch.second_cid + "'>" + ch.second_cname + "</option>");
					}
				}
			})
		})
	})
	<!-- 提交前表单校验 -->
	function checkSubmit(){
		var result = true;
		var r1 = checkEmpty('#goods_name', '#errGname');
		var r2 = checkCategory('#first_cid', '#errFirstCategory');
		var r3 = checkCategory('#second_cid', '#errSecondCategory');
		var r4 = checkTimeEmpty('#start_time', '#errStartTime');
		var r5 = checkTimeEmpty('#end_time', '#errEndTime');
		var r6 = checkPrice('#low_price', '#errLowPrice');
		var r7 = checkPrice('#price_markup', '#errMarkup');
		var r8 = checkPrice('#appraisal_price', '#errAppraisal');
		var r9 = null;
		if($("#isPictureModified").val() == "1"){
			r9 = checkFile('#picture', '#errImage');
		}else{
			r9 = true;
		}
		var r10 = checkEmpty('#goods_desc', '#errDescription');
		if (r1 && r2 && r3 && r4 && r5 && r6 && r7 && r8 && r9 && r10) {
			return true;
		} else {
			return false;
		}
	}
	function selectPicture(){
		checkFile('#picture', '#errImage');
		$("#goods_picture").hide();
		$("#isPictureModified").val(1);
	}
</script>
</head>
<body>
	<div class="container">
		<fieldset>
			<legend>修改商品</legend>
			<form action="/management?method=gupdate" method="post"
				autocomplete="off" enctype="multipart/form-data"
				onsubmit = "return checkSubmit()">
				<ul class="ulform">
					<li>
						<span>商品名称</span>
						<span id="errGname"></span>
						<input id="goods_name" name="goods_name" onblur="checkEmpty('#goods_name','#errGname')" value="${goodsDTO.goods_name}"/>
					</li>
					<li>
						<span>一级分类</span>
						<span id="errFirstCategory"></span>
						<select id="first_cid" name="first_cid" onchange="checkCategory('#first_cid','#errFirstCategory')">
							<option value="-1">请选择一级分类</option>
							<c:forEach items="${fCategory}" var="first">
								<option value="${first.first_cid}">${first.first_cname}</option>
							</c:forEach>
						</select>
					</li>
					<li>
						<span>二级分类</span>
						<span id="errSecondCategory"></span>
						<select id="second_cid" name="second_cid" onchange="checkCategory('#second_cid','#errSecondCategory')">
							<option value="${goodsDTO.second_cid}">${goodsDTO.second_cname}</option>
						</select>
					</li>
					<li>
						<span>开始时间</span>
						<span id="errStartTime"></span>
						<input type="text" id="start_time" name="start_time" value="${goodsDTO.start_time}"
							   onblur="checkTimeEmpty('#start_time','#errStartTime')" />
					</li>
					<li>
						<span>结束时间</span>
						<span id="errEndTime"></span>
						<input type="text" id="end_time" name="end_time" value="${goodsDTO.end_time}"
							   onblur="checkTimeEmpty('#end_time','#errEndTime')"/>
					</li>
					<li>
						<span>起拍价</span>
						<span id="errLowPrice"></span>
						<input id="low_price" name="low_price"  value="${goodsDTO.low_price}" onblur="checkPrice('#low_price','#errLowPrice')"/>
					</li>
					<li>
						<span>加价幅度</span>
						<span id="errMarkup"></span>
						<input id="price_markup" name="price_markup" value="${goodsDTO.price_markup}" onblur="checkPrice('#price_markup','#errMarkup')"/>
					</li>
					<li>
						<span>评估价</span>
						<span id="errAppraisal"></span>
						<input id="appraisal_price" name="appraisal_price" value="${goodsDTO.appraisal_price}" onblur="checkPrice('#appraisal_price','#errAppraisal')"/>
					</li>
					<li>
						<span>作品预览</span><span id="errImage"></span><br/>
						<input type="hidden" id="isPictureModified" name="isPictureModified" value="0">
						<img id="goods_picture" src="${goodsDTO.goods_picture }" style="width:361px;height:240px"/><br/>
						<input id="picture" name="picture" type="file" style="padding-left:0px;" accept="image/*"
						onchange="selectPicture()"/>
					</li>
					<li>
						<span>商品描述</span>
						<span id="errDescription"></span>
						<textarea
								id="goods_desc" name="goods_desc"
								onblur="checkEmpty('#goods_desc','#errDescription')">${goodsDTO.goods_desc}</textarea>
					</li>
					<li style="text-align: center;">
						<input type="hidden" id="id" name="id" value="${goodsDTO.goods_id}">
						<button type="submit" class="btn-button">提交表单</button>
					</li>
				</ul>
			</form>
		</fieldset>
	</div>

</body>
</html>
